<template>
	<view>
		<view style="height: 30rpx;"></view>
		<view class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.question}}  </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;display: flex;">
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;width: 100%;text-align: left;">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view class="uni-input">{{array[index].name}}</view>
					</picker>
				</view>	
			</view>
		</view>	
		<view class="cardBox" style="margin-top: 30rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.reason}}  </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;display: flex;">
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;width: 100%;text-align: left;">
					<picker @change="bindPickerChange2" :value="index2" :range="array2" range-key="name">
						<view class="uni-input">{{array2[index2].name}}</view>
					</picker>
				</view>	
			</view>
		</view>	
		
		
		<view class="cardBox" style="margin-top: 30rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao" style="width: 100%;display: flex;">
					<span class="biao_span">|</span> 
					<text class="cardTitle">{{text.upload_pic}} </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<formImages :item="{required:false,key:'images'}"   @change="selImages" />
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view v-if="transport_tan==true" style="color: red;width: 96%;margin-left: 2%;margin-top: 10rpx;">
					{{text.transport_yichang}}
				</view>
				<view v-if="crossborder_tan==true" style="color: red;width: 96%;margin-left: 2%;margin-top: 10rpx;">
					{{text.crossborder_yichang}}
				</view>
			</view>
		</view>
		
		<view class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.apply}}  </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<u-form-item >
					<u-input v-model="content" :placeholder="$t('请输入内容')" :custom-style="{height:'100rpx'}" height="100" type="textarea" maxlength="1500" />
				</u-form-item>
				
				
			</view>
		</view>
		
		<view v-if="applytime_tan==true" class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.applytime}}  </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<u-form-item >
					<u-input v-model="edit_speed"  :custom-style="{height:'50rpx'}" height="50"  type="number"/>
				</u-form-item>
			</view>
		</view>
		
		<view style="display: flex;width:90%;margin-left:5%">
			<view style="width: 100%;">
				<u-button @click="subForm()"  style="" :custom-style="customStyle2" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('提交申请') }}
				</u-button>
			</view>
		</view>
		<view style="height: 30px;"></view>	
		
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	import formImages from "@/components/buildForm/formImages.vue";
	
	export default {
		components: {
			formImages
		},
		props:{
			order:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				//文字
				text:{			
					question:this.$t('异常问题'),
					reason:this.$t('异常原因'),
					transport_yichang:this.$t('上传的图片需证明货物发生异常时,货物不在车上，车辆未离开装卸现场'),
					crossborder_yichang:this.$t('上传的图片需证明货物发生异常时需在车上'),
					upload_pic:this.$t('上传照片'),
					apply:this.$t('情况说明'),
					applytime:this.$t('申请调整时效-运输速度(天)'),
				},
				array:[
					{ name: this.$t('请选择出现的问题') }, { name: this.$t('自身异常') }, { name: this.$t('他人异常') }
				],
				index:0,
				
				array2:[
					{ name: this.$t('请选择异常原因') }, 
					{ name: this.$t('货物丢失') }, { name: this.$t('货物破损') }, { name: this.$t('货物缺失') }, { name: this.$t('超时交接') },
					{ name: this.$t('海关滞留') }, { name: this.$t('海关扣货') }, { name: this.$t('海关查验') }, { name: this.$t('恶劣天气') },
					{ name: this.$t('车辆故障') }, { name: this.$t('道路问题') }, { name: this.$t('交通事故') }, { name: this.$t('其他') },
				],
				index2:0,
				item_img:{required:false,key:'images',value:[]},
				
				subDisabled:false,transport_tan:false,crossborder_tan:false,applytime_tan:false,
				loading:false,
				edit_speed:'',
				content:'',
				number:'',
				images:[],
				type:'',
				customStyle2: {
					width: '500rpx',
					height: '83rpx',
					marginTop:'20rpx',
					fontSize:'24rpx',
					background: '#ff2323',
					borderRadius: '56rpx'
				},
			}
		},
		
		methods:{
			bindPickerChange: function(e) {
			    this.index = e.detail.value;
				this.applytime_tan=false
				
				if(this.index==2){
					if(this.index2==4){
						this.applytime_tan=true
					}
				}
			},
			bindPickerChange2: function(e) {
			    this.index2= e.detail.value;
				this.transport_tan=false
				this.crossborder_tan=false
				this.applytime_tan=false
				if(this.type=='transport'){
					if(this.index2==1){ this.transport_tan=true }
					if(this.index2==2){ this.transport_tan=true }
					if(this.index2==3){ this.transport_tan=true }
				}
				if(this.type=='crossborder'){
					if(this.index2==1){ this.crossborder_tan=true }
					if(this.index2==2){ this.crossborder_tan=true }
					if(this.index2==3){ this.crossborder_tan=true }
				}
				
				if(this.index==2){
					if(this.index2==4){
						this.applytime_tan=true
					}
				}
				
			},
			selImages(e,data){
				console.log(e,data)
				this.images=data
			},
			subForm(){
				const that = this
				if(that.index==0){
					var abnormal_issues = ''
				}else{
					var abnormal_issues = that.array[that.index]['name']
				}
				if(that.index2==0){
					var abnormal_cause = ''
				}else{
					var abnormal_cause = that.array2[that.index2]['name']
				}
				
				if(that.index==0){
					uni.showModal({
						content: that.$t('请选择出现的问题'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false;
				}
				
				if(that.index2==0){
					uni.showModal({
						content: that.$t('请选择异常原因'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false;
				}
					
				if(that.content==''){
					uni.showModal({
						content: that.$t('请输入内容'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false;
				}
				
				var shijian = new Date().getTime()*0.001
				uni.showLoading({
					title: "Loading...",
					mask: true
				})
				that.$u.api.order.abnormalFeedback({
					order_id: that.order.orderInfo.id,
					order_join_id: that.order.orderInfo.join_order_id,
					join_user_id: that.order.orderInfo.join_user_id,
					situation_time:parseInt(shijian),
					user_id: that.order.user_id,
					abnormal_img:that.images,
					situation_description :that.content,
					abnormal_issues:abnormal_issues,
					abnormal_cause:abnormal_cause,
					edit_speed:that.edit_speed,
					lang:that.lang
				}).then(res => {
					uni.hideLoading();
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					setTimeout(function() {
						that.$emit('change','abnormal','Feedback',res)
					}, 2000);
					
					return false;
				})
			}
		},
		mounted() {
			console.log(this.order)
			if(this.order){
				this.type=this.order.orderInfo.type
			}
			this.loading=true
		}
	}
</script>

<style lang="css" >
	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	.flex{width: 100%;display: flex;}
	.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
	.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
	.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
	.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
	.close_image2{
		width: 120rpx;height: 120rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
	}
</style>